<template>
	<template v-for="subItem in menuList" :key="subItem.path">
		<!-- 子菜单 -->
		<el-sub-menu v-if="subItem.children && subItem.children.length > 0" :index="subItem.path">
			<template #title>
				<i :class="`iconfont ${subItem.meta.icon || 'iconlayout'} pr-4`"></i>
				<span>{{ isEnglish ? subItem.meta.entitle : subItem.meta.title }}</span>
			</template>
			<SubMenu :menuList="subItem.children" />
		</el-sub-menu>

		<!-- 不包含子菜单 -->
		<el-menu-item v-else :index="subItem.path" @click="handleClickMenu(subItem)">
			<i :class="`iconfont ${subItem.meta.icon || 'iconlayout'} pr-4`"></i>
			<template #title>
				<span>{{ isEnglish ? subItem.meta.entitle : subItem.meta.title }}</span>
			</template>
		</el-menu-item>
	</template>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { GlobalStore } from "@/stores";
import mittBus from "@/utils/mittBus";

defineProps<{ menuList: Menu.MenuOptions[] }>();

const globalStore = GlobalStore();
const isEnglish = ref(globalStore.language == "en");

const router = useRouter();
const handleClickMenu = (subItem: Menu.MenuOptions) => {
	if (subItem.meta.isLink) return window.open(subItem.meta.isLink, "_blank");
	router.push(subItem.path);
};

onBeforeMount(() => {
	//监听语言改变
	mittBus.on("changeLang", lang => {
		if (lang == "zh") {
			isEnglish.value = false;
		} else if (lang == "en") {
			isEnglish.value = true;
		}
	});
});
onBeforeUnmount(() => {
	mittBus.off("changeLang");
});
</script>
